<template>
  <div class="app-container">
    <div class="app-title">查询条件</div>
    <div class="filter-container">
      关键字
      <el-input
        v-model="form.channelName"
        placeholder="发布人,标题,内容"
        class="search-item"
      />
      平台
      <el-select v-model="form.platform" placeholder="平台">
        <el-option value="02" label="ebroker" />
        <el-option value="03" label="ebroker招募售后网点" />
      </el-select>
      创建时间
      <el-date-picker
        v-model="dateTime"
        :range-separator="null"
        start-placeholder="创建时间"
        value-format="yyyy-MM-dd"
        class="search-item date-range-item"
        type="daterange"
      />
      <el-button
        v-has-permission="['expand:search']"
        class=""
        type="primary"
        @click="search"
      >
        {{ $t("common.search") }}
      </el-button>
      <el-button class="" type="success" @click="reset">
        {{ $t("table.reset") }}
      </el-button>
      <el-button
        v-has-permission="['expand:add']"
        class="el-icon-folder-add"
        type="success"
        @click="add"
      >
        新增渠道
      </el-button>
    </div>
    <div class="app-title">推广列表</div>
    <el-table
      ref="table"
      :key="tableKey"
      v-loading="loading"
      :data="list"
      border
      fit
      style="width: 100%"
    >
      <el-table-column
        label="序号"
        :show-overflow-tooltip="true"
        align="center"
        type="index"
      />
      <el-table-column
        label="渠道名称"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.channelName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="平台"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.platform == "02" ? "ebroker" : scope.row.platform == "03"?'ebroker招募售后网点':'其他平台' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="创建人"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.createBy }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="二维码"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <a :href="scope.row.qrCode" style="color: #00f" target="_blank" rel="noopener noreferrer">下载</a>
          <!-- <el-link :href="scope.row.qrCode" style="color: #00f">下载</el-link> -->
        </template>
      </el-table-column>
      <el-table-column
        label="URL"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <a :href="scope.row.linkUrl" style="color: #00f" target="_blank" rel="noopener noreferrer"> {{ scope.row.linkUrl }}</a>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="center" label="app下载量">
        <template slot-scope="scope">
          <span>IOS:{{ scope.row.iosDown }}</span>
          <br>
          <span>安卓:{{ scope.row.androidDown }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pagination.pageNum"
      :limit.sync="pagination.pageSize"
      @pagination="search"
    />
    <!-- 新增渠道 -->
    <el-dialog title="新增渠道" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="渠道名称">
          <el-input v-model="forms.channelName" />
        </el-form-item>
        <el-form-item label="平台">
          <el-select v-model="forms.platform" placeholder="请选择平台">

            <!-- <el-option label="官网" value="01" /> -->
            <el-option label="ebroker" value="02" />
            <el-option label="ebroker招募售后网点" value="03" />
            <el-option label="车E家" value="04" />
          </el-select>
        </el-form-item>
        <el-form-item label="链接页面">
          <el-select
            v-model="forms.linkUrl"
            placeholder="请选择页面"
            @change="fnChangeUrl"
          >
            <el-option
              label="ebroker 下载页"
              :value="NODE_ENV=='production'?'https://www.ecarbroker.com.cn/esch5/index.html#/down/1':'https://test.ecarbroker.com.cn/esch5/index.html#/down/1'"
            />
            <el-option
              label="ebroker招募售后网点 下载页"
              :value="NODE_ENV=='production'?'https://www.ecarbroker.com.cn/esch5/index.html#/down/3':'https://test.ecarbroker.com.cn/esch5/index.html#/down/3'"
            />
            <el-option
              label="基础估价"
              :value="NODE_ENV=='production'?'https://www.ecarbroker.com.cn/esch5/index.html#/evaluation/outerIndex':'https://test.ecarbroker.com.cn/esch5/index.html#/evaluation/outerIndex'"
            />
            <el-option
              label="车E家"
              :value="NODE_ENV=='production'?'https://www.ecarbroker.com.cn/ecarbokerh5/index.html#/register/result':'https://test.ecarbroker.com.cn/ecarbokerh5/index.html#/register/result'"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="viewUrl.length > 0" label="页面预览">
          <el-link
            type="primary"
            :href="viewUrl"
            target="_blank"
          >点击预览</el-link>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="fnSumbit">发 布</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      total: 0,
      pagination: {
        pageSize: 10,
        pageNum: 1
      },
      loading: false,
      tableKey: 0,
      list: [
        {
          androidDown: 39,
          channelName: 'yuan',
          createBy: '123456',
          createTime: '2021-07-03 19:06:19',
          id: 37,
          iosDown: 0,
          isDel: 0,
          linkUrl:
            'https://test.ecarbroker.com.cn/esch5/index.html#/down/1?qrid=37',
          platform: '02',
          qrCode:
            'https://ecar-broker.oss-cn-shenzhen.aliyuncs.com/dev/ecar/web/extend/qrCode/ee43d8de76153f36cd52b8685c1a03e9.png',
          status: 1,
          updateBy: '123456',
          updateTime: '2021-07-04 13:11:04'
        }
      ],
      form: {
        channelName: '',
        platform: '',
        linkUrl: '',
        startTime: '',
        endTime: ''
      },
      forms: {
        channelName: '',
        platform: '',
        linkUrl: ''
      },
      dateTime: '',
      dialogVisible: false,
      viewUrl: '',
      NODE_ENV: process.env.NODE_ENV
    }
  },
  created() {
    // this.search()
  },
  mounted() {
    this.$get('/web/appExtend/sync').then(res => {
      if (res.data.code !== '0') {
        this.$message.error(res.data.message)
      }
      this.search()
    })
  },
  methods: {
    search(e) {
      this.loading = true
      if (this.dateTime) {
        this.form.startTime = `${this.dateTime[0]} 00:00`
        this.form.endTime = `${this.dateTime[1]} 23:59`
      }
      if (e && e.page) {
        this.pagination.pageSize = e.limit
        this.pagination.pageNum = e.page
      }
      this.$post(
        '/web/appExtend/list',
        {
          queryRequest: {
            ...this.pagination,
            field: 'createTime',
            order: 'descending'
          },
          entity: {
            ...this.form
          }
        },
        'json'
      )
        .then((res) => {
          // console.log(res)
          this.loading = false
          if (res.data.code === '0') {
            this.list = res.data.data.rows
            this.total = res.data.data.total
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    reset() {
      this.dateTime = ''
      this.form = {}
      this.search()
    },
    add() {
      this.forms = {}
      this.dialogVisible = true
    },
    fnSumbit() {
      this.$confirm('是否确认编辑的内容无误并执行发布?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$post('/web/appExtend', { ...this.forms, id: 0 }, 'json').then(
          (res) => {
            if (res.data.code === '0') {
              this.$message.success('新增成功')
              this.dialogVisible = false
              this.search()
              this.forms = {}

            // this.$refs.forms.resetField()
            }
          }
        )
      }).catch(() => {
      })
    },
    fnChangeUrl(e) {
      if (e) {
        this.viewUrl = e
      }
    }
  }
}
</script>

<style>
</style>
